<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
        <span style="position: relative; top: 10px">
          <i class="el-icon-search"></i>
          搜索
        </span>
                <el-button-group style="float: right; padding: 3px 0">
                    <el-button
                            size="small"
                            type="primary"
                            icon="el-icon-search"
                            @click="btnSearch"
                    >搜索</el-button
                    >
                    <el-button
                            size="small"
                            icon="el-icon-refresh"
                            type="primary"
                            @click="btnReset"
                    >重置</el-button
                    >
                </el-button-group>
            </div>
            <el-form :model="searchForm" :inline="true" ref="searchFormRef">
                <el-row>
                    <el-col :span="colSize">
                        <el-form-item label="角色" prop="roleId">
                            <el-select
                                    v-model="searchForm.roleId"
                                    filterable
                                    placeholder="请选择"
                            >
                                <el-option
                                        v-for="item in roleList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="data-card">
            <div slot="header" class="clearfix">
        <span style="position: relative; top: 7px">
          <i class="el-icon-tickets"></i>
          用户角色列表
        </span>
                <div style="float: right; padding: 3px 0">
                    <el-button
                            size="small"
                            type="warning"
                            icon="el-icon-plus"
                            @click="changeVisible('分配权限')"
                    >添加</el-button
                    >
                    <!--          <el-button-->
                    <!--            size="small"-->
                    <!--            type="danger"-->
                    <!--            icon="el-icon-delete"-->
                    <!--            @click="btnDelete"-->
                    <!--            >批量删除</el-button-->
                    <!--          >-->
                </div>
            </div>
            <el-table fit :data="userRoleList" stripe style="width: 100%">
                <el-table-column align="center" type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="id" label="编号" width="50">
                </el-table-column>
                <el-table-column align="center" prop="loginName" label="登录账号">
                </el-table-column>
                <el-table-column align="center" prop="roleName" label="角色名称">
                </el-table-column>
                <el-table-column width="300" align="center" label="操作">
                    <template slot-scope="scope">
                        <p>
                            <el-button
                                    size="mini"
                                    icon="el-icon-edit"
                                    @click="changeVisible('编辑', scope.row.id)"
                            >编辑</el-button
                            >
                            <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="btnDelete(scope.row)"
                            >删除</el-button
                            >
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    style="margin-top: 20px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-sizes="[10, 20, 30]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
            >
            </el-pagination>
        </el-card>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :model="userRoleForm" ref="userRoleFormRef">
                <el-input type="hidden" v-model="userRoleForm.id"></el-input>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户" prop="userId">
                            <el-select
                                    v-model="userRoleForm.userId"
                                    filterable
                                    placeholder="请选择"
                            >
                                <el-option
                                        v-for="item in userList"
                                        :key="item.id"
                                        :label="item.loginName"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色" prop="roleId">
                            <el-select
                                    v-model="userRoleForm.roleId"
                                    filterable
                                    placeholder="请选择"
                            >
                                <el-option
                                        v-for="item in roleList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import {
        api_allRoleList,
        api_deleteUserRole, api_NoRoleUsers,
        api_saveUserRole,
        api_userRoleInfo,
        api_userRoleList
    } from "../../api/userRole";

    export default {
        data() {
            return {
                colSize: 6,
                userRoleList: [],
                roleList:[],
                userList:[],
                searchForm: {
                    pageNum: 1,
                    pageSize: 10,
                    roleId: null,
                },
                page: {
                    pageNum: 1,
                    pageSize: 10,
                    totalPage: 3,
                    total: 11,
                },
                userRoleForm: {
                    id:null,
                    roleId: null,
                    userId: null,
                },
                dialogFormVisible: false,
                dialogTitle: null,
            }
        },
        created() {
            this.btnSearch()
            this.handleRoleList()
            this.handleUserList()
        },
        methods: {
            btnSearch() {
                this.handleUserRoleList()
            },
            btnReset() {
                this.$refs.searchFormRef.resetFields()
            },
            async btnDelete(row) {
                this.$confirm('此操作将删除选中的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        //获取选中行id集合
                        this.handleDelete(row.id)
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消',
                        })
                    })
            },
            handleDelete(id) {
                let params = new URLSearchParams()
                params.append('id', id)
                api_deleteUserRole(params).then((response) => {
                    const res = response.data
                    if (!res.success) {
                        this.$message.error(res.msg)
                        return
                    }
                    this.$message({
                        type: 'success',
                        message: res.msg,
                    })
                    this.btnSearch()
                })
            },
            handleSizeChange(val) {
                this.searchForm.pageSize = val
                this.btnSearch()
            },
            handleCurrentChange(val) {
                this.searchForm.pageNum = val
                this.btnSearch()
            },
            //获取所有用户角色列表
            async handleUserRoleList() {
                const param = {
                    page: this.searchForm.pageNum,
                    limit: this.searchForm.pageSize,
                    bean: JSON.stringify(this.searchForm),
                }
                const { data: res } = await api_userRoleList(param)
                this.userRoleList = res.data.list
                this.page.total = res.data.total
            },
            //获取所有角色
            async handleRoleList() {
                const { data: res } = await api_allRoleList()
                this.roleList = res.data
            },
            async handleUserList(){
                const { data: res } = await api_NoRoleUsers()
                this.userList = res.data
            },
            changeVisible(title, id) {
                if(this.$refs.userRoleFormRef !== undefined){
                    this.$refs.userRoleFormRef.resetFields()
                }
                this.userRoleForm.id = null
                this.dialogFormVisible = true
                this.dialogTitle = title
                this.getInfo(id)
            },
            async getInfo(id) {
                if (id) {
                    const { data: res } = await api_userRoleInfo({
                        id: id,
                    })
                    this.userRoleForm = res.data
                }
            },
            onSubmit() {
                this.$refs.userRoleFormRef.validate(async (valid) => {
                    if (!valid) {
                        return false
                    }
                    const { data: res } = await api_saveUserRole(this.userRoleForm)
                    if (!res.success) {
                        this.$message.error(res.msg)
                        return
                    }
                    this.$message({
                        message: res.msg,
                        type: 'success',
                    })
                    this.dialogFormVisible = false
                    this.btnSearch()
                })
            },
        },
    }
</script>

<style scoped>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: '';
    }
    .clearfix:after {
        clear: both;
    }
    .box-card {
        width: 100%;
        margin: auto;
    }
    .data-card {
        margin-top: 10px;
    }

    .el-date-picker {
        float: left;
    }
</style>
